<!--
 * @Autor: 王琛
 * @Description: 主页
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#MainApp {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;

  & > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .routingExit {
    display: grid;
    grid-template-rows:var(--appTopBarHeight) calc(100% - var(--appTopBarHeight));
    grid-template-columns: 100%;
    z-index: 10;
  }
}
</style>


<template>
  <div id="MainApp">
    <!-- UE触摸层通讯 -->
    <UeTouchLayer_PC></UeTouchLayer_PC>
    <!-- 路由出口 -->
    <div class="routingExit">
      <router-view v-slot="{ Component }">
        <component :is="Component"/>
      </router-view>
    </div>
  </div>
</template>


<script setup lang="ts" name="MainApp">

import {onMounted} from "vue";

import {initWebSocket} from "src/assets/js/UE4/index.js";

import {useMainStore} from "src/pinia/index"

import _axios from "axios";

import JSON5 from "json5";

const _state = useMainStore();


onMounted(async () => {

  const pageDataConfigJSON5 = await _axios("./MainConfig.json5",{
    responseType:"text"
  });

  _state.pageDataConfig = JSON5.parse(pageDataConfigJSON5.data);

  // 更改页面title数据
  document.title = _state.pageDataConfig?.PageName || "VR控制器";

  //  业务ip
  if(!_state.PageDataConfig?.SocketIp_Business)  _state.PageDataConfig.SocketIp_Business = `ws://${location.hostname}:26210`

  // UE事件Ip
  if(!_state.PageDataConfig?.SocketIp_MouseAndKeyboard)  _state.PageDataConfig.SocketIp_MouseAndKeyboard = `ws://${location.hostname}:26610`

  ConnectUE_BusinessCommunication();

  ConnectUE_MouseKeyboardSynchronization();
})

/**
 * @description: 鼠标键盘UE同步事件
 * @author: 王琛
 * @Date: 2024-10-16 10:12:45
 * @param {*}
 * @return {*}
 */
function ConnectUE_MouseKeyboardSynchronization() {
  _state.ueSocket = new initWebSocket({
    // @ts-ignore
    ip: _state.pageDataConfig.SocketIp_Business
  })
}

/**
 * @description: UE业务通讯事件
 * @author: 王琛
 * @Date: 2024-10-16 10:31:56
 * @param {*}
 * @return {*}
 */
function ConnectUE_BusinessCommunication() {
  _state.ueSocketOne = new initWebSocket({
    //@ts-ignore
    ip: _state.pageDataConfig.SocketIp_MouseAndKeyboard,
    message: (data) => {
      // 记录响应的数据
      _state.ueResData = Object.assign(data, {time: new Date().getTime()});
    },
    initFn: [],
    closeAndErrorFn: () => {
      _state.appIsLoading = false;
    }
  });
}

/**
 * @description: 监听window窗口变化
 * @author: 王琛
 * @Date: 2023-07-07 11:50:51
 * @param {*}
 * @return {*}
 */
window.onresize = WindowChanges;

/**
 * @description: 监听window窗口变化
 * @author: 王琛
 * @Date: 2023-07-07 11:50:51
 * @param {*}
 * @return {*}
 */
function WindowChanges() {
  // 获取当前窗口的宽度
  _state.appWindowInfo.width = document.documentElement.clientWidth;
  // 获取当前窗口的高度
  _state.appWindowInfo.height = document.documentElement.clientHeight;
  // 计算出当前窗口的宽高比
  const ratio = _state.appWindowInfo.width / _state.appWindowInfo.height;
  // 判断当前窗口的宽高比
  if (ratio > 1) {
    // 如果宽高比大于1.5的话就是横屏
    _state.appWindowInfo.appOrientation = "landscape";
  } else {
    // 如果宽高比小于1.5的话就是竖屏
    _state.appWindowInfo.appOrientation = "portrait";
  }
}

</script>
